<template>
  <div class="health-records-container">
    <!-- 顶部切换标签 -->
    <el-tabs v-model="activeTab" class="mb-4">
      <el-tab-pane :label="t('healthRecords.tabs.userArchives')" name="user">
        <UserArchiveList v-if="activeTab === 'user'" />
      </el-tab-pane>
      <el-tab-pane
        :label="t('healthRecords.tabs.familyArchives')"
        name="family"
      >
        <FamilyArchiveList v-if="activeTab === 'family'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import FamilyArchiveList from "./components/FamilyArchiveList.vue";
import UserArchiveList from "./components/UserArchiveList.vue";

// 国际化
const { t } = useI18n();

// 当前激活的标签页
const activeTab = ref("user");
</script>

<style lang="scss">
.health-records-container {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  min-height: calc(100vh - 100px);
}
</style>
